<template>
	<div>
		<hd :title='title'></hd>
		<slid :s='img'></slid>
		<div class="detail">
			<h2>卤香滑鸡</h2>
			<div class="price">
				<b>￥30</b><span>（积分可抵扣5元）</span>
			</div>
			<div class="kucun">
				<p>库存：1000</p>
				<p>运费：免运费</p>
			</div>
		</div>
		<div class="comment">
			<h2>宝贝评价（0）</h2>
			<ul>
				<li><a href="">有图（0）</a></li>
				<li><a href="">好评（0）</a></li>
				<li><a href="">中评（0）</a></li>
				<li><a href="">差评（0）</a></li>
			</ul>
		</div>
		<div class="detail-con">
			<p>  排毒排便－香蕉牛奶汁</p>
			<p>  适量加入牛奶调理，可以补充更多钙质，对于正在减肥中的女孩来说，也比较有饱足感。经常失眠或是容易经痛的女孩也可以喝喝看！</p>
			<br />
			<br />
			<p>  止咳防晕－芒果汁</p>
			<p>  退火利尿－椰子汁</p>
			<p>  不过有的人会怕椰子的味道，也因为椰子水生冷寒性，因此女孩们如果想喝椰子水来消暑，或是肠胃不好的人，在喝之前还是要三思！</p>
			<p>  水果之王－奇异果汁</p>
		</div>
		<div class="h50"></div>
		<ul class="fixed-btn">
			<li><a href="" class="current">立即购买</a></li>
			<li><a href="javascript:;">加入购物车</a></li>
		</ul>
	</div>
</template>

<script>
	import hd from "./hd";
	import slid from "./slide";
	export default {
		data() {
			return {
				title: '商品详情detail',
				speak: [],
				img: [
					"/src/assets/images/banner3.png",
					"/src/assets/images/banner4.png",
					"/src/assets/images/banner3.png"
				],
			}
		},
		mounted() {
			let id = this.$route.params.ID;
			// console.log(this.$route)
			this.$http({
				//   url: "/data/newsdetail.data"
				url: "http://localhost:9527/detail"
				// params:{uid:id}
			}).then(res => {
				// console.log(res.data);
				this.speak = res.data[id - 1];
			});
		},
		components: {
			hd,
			slid
		}
	};
</script>

<style scoped>
	.my-swipe {
		height:140px;
	}
	
	.comment {
		background: #fff;
		overflow: hidden;
		padding: 1rem;
		margin-top: 10px;
	}
	
	.comment li {
		float: left;
		font-size: 1.3rem;
		background: #f5ece7;
		color: #7c7877;
		margin-right: 5px;
		padding: .1rem .5rem;
		border-radius: 5px;
	}
	
	.price {
		border-bottom: 1px solid #ddd;
	}
	
	.price b {
		color: #f60;
		font-size: 1.8rem;
	}
	
	.price span {
		color: #999;
	}
	
	.kucun p {
		color: #666;
	}
	
	.detail-con {
		margin-top: 10px;
		background: #fff;
		padding: 1rem;
	}
	
	.detail-con img {
		width: 100%;
	}
	
	.detail {
		padding: 1rem;
		overflow: hidden;
		background: #fff;
	}
</style>